<template>
	<view class="testpage">
		<!-- 表头 -->
		<view class="testpage_title">
			<view class="title">
				<view></view>
				<text class="font15 font-323232 font-b">基本信息</text>
			</view>
			<!-- 基本信息 -->
			<view class="testpage_info_bos">
				<view class="testpage_info">
					<view class="info_bos">
						<view class="font14 font-7d766b">姓名</view>
						<text class="font14 font-323232">何承阳</text>
					</view>
					<view class="info_bos">
						<view class="font14 font-7d766b">性别</view>
						<text class="font14 font-323232">男</text>
					</view>
				</view>
				<view class="testpage_info">
					<view class="info_bos">
						<view class="font14 font-7d766b">年龄</view>
						<text class="font14 font-323232">26</text>
					</view>
					<view class="info_bos">
						<view class="font14 font-7d766b">科室</view>
						<text class="font14 font-323232">普通外科</text>
					</view>
				</view>
				<view class="testpage_info">
					<view class="info_bos">
						<view class="font14 font-7d766b">就诊卡号</view>
						<text class="font14 font-323232">HA5156153</text>
					</view>
					<view class="info_bos">
						<view class="font14 font-7d766b">标本类型</view>
						<text class="font14 font-323232">静脉全血</text>
					</view>
				</view>
			</view>
			<!-- 边框 -->
			<view class="com_border"></view>
			<view class="title">
				<view></view>
				<text class="font15 font-323232 font-b">检验明细</text>
			</view>
			<!-- 检验明细 -->
			<view class="detailed">
				<view class="detailed_box detailed_title font14 font-323232 font-b">
					<view class="detailed_width195 detailed_align_left">项目</view>
					<view class="detailed_width165 detailed_border_left detailed_align_center">结果</view>
					<view class="detailed_width165 detailed_border_left detailed_align_center">参考值</view>
					<view class="detailed_width165 detailed_border_left detailed_align_center">单位</view>
				</view>
				<view v-for="(item,index) in detailedList" :key="index" class="detailed_box detailed_info font14 font-7d766b">
					<view class="detailed_width195 detailed_align_left detailed_border_top">{{item.name}}</view>
					<view class="detailed_width165 detailed_border_left detailed_align_center detailed_border_top">
						<text :class="item.type == 'H'?'colord81e06':item.type == 'L'?'color2aa515':''">{{item.num}}</text>
						<image v-if="item.type == 'H'" class="detailed_image" src="@/static/home/top.png"></image>
						<image v-if="item.type == 'L'" class="detailed_image" src="@/static/home/bottom.png"></image>
					</view>
					<view class="detailed_width165 detailed_border_left detailed_align_center detailed_border_top">{{item.zhi}}
					</view>
					<view class="detailed_width165 detailed_border_left detailed_align_center detailed_border_top">{{item.dan}}
					</view>
				</view>
			</view>
			<!-- 边框 -->
			<view class="com_border"></view>
			<!-- 检查人 -->
			<view class="Inspector">
				<view class="testpage_info">
					<view class="info_bos_bottom">
						<view class="font14 font-7d766b">申请人：</view>
						<text class="font14 font-323232">何承阳</text>
					</view>
					<view class="info_bos_bottom">
						<view class="font14 font-7d766b">检查人：</view>
						<text class="font14 font-323232">熊二</text>
					</view>
				</view>
				<view class="testpage_info">
					<view class="info_bos_bottom">
						<view class="font14 font-7d766b">日期：</view>
						<text class="font14 font-323232">2020-10-1</text>
					</view>
					<view class="info_bos_bottom">
						<view class="font14 font-7d766b">审核人：</view>
						<text class="font14 font-323232">熊大</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//数据
				detailedList: [{
						name: '白细胞白细胞白细胞白细胞白细胞',
						num: '5.36',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'N'
					},
					{
						name: '白细胞',
						num: '2.01',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'L'
					},
					{
						name: '白细胞',
						num: '10.3',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'H'
					},
					{
						name: '白细胞白细胞白细胞白细胞白细胞',
						num: '5.36',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'N'
					},
					{
						name: '白细胞',
						num: '2.01',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'L'
					},
					{
						name: '白细胞',
						num: '10.3',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'H'
					},
					{
						name: '白细胞白细胞白细胞白细胞白细胞',
						num: '5.36',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'N'
					},
					{
						name: '白细胞',
						num: '2.01',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'L'
					},
					{
						name: '白细胞',
						num: '10.3',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'H'
					},
					{
						name: '白细胞白细胞白细胞白细胞白细胞',
						num: '5.36',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'N'
					},
					{
						name: '白细胞',
						num: '2.01',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'L'
					},
					{
						name: '白细胞',
						num: '10.3',
						zhi: '3.5-9.5',
						dan: '10/g',
						type: 'H'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.testpage {
		padding-bottom: 120rpx;
	}

	/* 表头 */
	.title {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		margin-top: 50rpx;
	}

	.title view {
		height: 40rpx;
		width: 5rpx;
		border-radius: 3rpx;
		background-color: #6bcbb6;
		margin-right: 30rpx;
	}

	/* 基本信息 */
	.testpage_info_bos {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.testpage_info {
		display: flex;
		padding: 0 30rpx;
	}

	.info_bos {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		width: 345rpx;
	}

	.info_bos view {
		width: 140rpx;
	}

	.info_bos text {
		display: block;
		width: 205rpx;
	}

	/* 检验明细 */
	.detailed {
		width: 690rpx;
		margin: 40rpx 30rpx 40rpx 30rpx;
		border: 2rpx #eeeeee solid;
		border-radius: 10rpx;
	}

	.detailed_box {
		display: flex;
	}

	.detailed_title {
		background-color: #f9fdfe;
	}

	.detailed_title view {
		height: 70rpx;
		line-height: 70rpx;
	}

	.detailed_info {
		background-color: #ffffff;
	}

	.detailed_info view {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.detailed_image {
		width: 20rpx;
		height: 28rpx;
		margin-left: 8rpx;
	}

	.detailed_width195 {
		width: 195rpx;
	}

	.detailed_width165 {
		width: 165rpx;
	}

	.detailed_border_top {
		border-top: 1rpx #eeeeee solid;
	}

	.detailed_border_left {
		border-left: 1rpx #eeeeee solid;
	}

	.colord81e06 {
		color: #d81e06;
	}

	.color2aa515 {
		color: #2aa515;
	}

	.detailed_align_center {
		text-align: center;
	}

	.detailed_align_left {
		justify-content: left !important;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	/* 检查人 */
	.Inspector {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f8f8f8;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}

	.info_bos_bottom {
		display: flex;
		align-items: center;
		width: 345rpx;
		margin-bottom: 10rpx;
	}

	.info_bos_bottom view {
		width: 140rpx;
	}

	.info_bos_bottom text {
		display: block;
		width: 205rpx;
	}
</style>
